<template>
  <div>
    <el-dialog
        :title="formData.id ? '编辑技能补贴申请' : '新增技能补贴申请'"
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
        @close="onClose"
    >
      <el-form
          ref="form"
          :model="formData"
          :rules="formRules"
          label-width="140px"
          size="small"
      >
        <el-card shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="申请人姓名" prop="applicant_name">
                <el-input v-model="formData.applicant_name" placeholder="请输入申请人姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="formData.phone" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <el-select v-model="formData.gender" placeholder="请选择性别">
                  <el-option label="男" value="男" />
                  <el-option label="女" value="女" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号" prop="id_card">
                <el-input v-model="formData.id_card" placeholder="请输入身份证号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="申请人单位名称" prop="company_name">
                <el-input v-model="formData.company_name" placeholder="请输入申请人单位名称" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">证书信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="证书类型" prop="certificate_type">
                <el-select v-model="formData.certificate_type" placeholder="请选择证书类型">
                  <el-option label="职业资格证书" :value="1" />
                  <el-option label="职业技能等级证书" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证书等级" prop="certificate_level">
                <el-select v-model="formData.certificate_level" placeholder="请选择证书等级">
                  <el-option label="初级" :value="1" />
                  <el-option label="中级" :value="2" />
                  <el-option label="高级" :value="3" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="证书编号" prop="certificate_number">
                <el-input v-model="formData.certificate_number" placeholder="请输入证书编号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="职业(工种)" prop="occupation">
                <el-input v-model="formData.occupation" placeholder="请输入职业(工种)" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="发证日期" prop="issue_date">
                <el-date-picker
                    v-model="formData.issue_date"
                    type="date"
                    placeholder="选择发证日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">账户信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="社保卡开户银行" prop="social_bank">
                <el-input v-model="formData.social_bank" placeholder="请输入社保卡开户银行" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="社保卡银行账号" prop="social_account">
                <el-input v-model="formData.social_account" placeholder="请输入社保卡银行账号" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never" style="margin-bottom: 20px;">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">材料上传</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="证岗相适证明">
                <el-input
                    v-model="formData.certification_proof"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入证岗相适证明（图片上传路径）"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证正面照片">
                <el-upload
                    ref="id_card_front_photo"
                    :action="uploadAction"
                    :on-success="(response, file, fileList) => handleUploadSuccess('id_card_front_photo', response, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove('id_card_front_photo', file, fileList)"
                    :file-list="formData.id_card_front_photo ? [{name: 'id_card_front_photo', url: formData.id_card_front_photo}] : []"
                    accept="image/*"
                    multiple
                    list-type="picture-card"
                    :limit="5">
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="身份证反面照片">
                <el-upload
                    ref="id_card_back_photo"
                    :action="uploadAction"
                    :on-success="(response, file, fileList) => handleUploadSuccess('id_card_back_photo', response, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove('id_card_back_photo', file, fileList)"
                    :file-list="formData.id_card_back_photo ? [{name: 'id_card_back_photo', url: formData.id_card_back_photo}] : []"
                    accept="image/*"
                    multiple
                    list-type="picture-card"
                    :limit="5">
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="毕业证书或教育部学历证书电子注册备案表">
                <el-upload
                    ref="graduation_cert_photo"
                    :action="uploadAction"
                    :on-success="(response, file, fileList) => handleUploadSuccess('graduation_cert_photo', response, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove('graduation_cert_photo', file, fileList)"
                    :file-list="formData.graduation_cert_photo ? [{name: 'graduation_cert_photo', url: formData.graduation_cert_photo}] : []"
                    accept="image/*"
                    multiple
                    list-type="picture-card"
                    :limit="5">
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="学位证照片">
                <el-upload
                    ref="degree_cert_photo"
                    :action="uploadAction"
                    :on-success="(response, file, fileList) => handleUploadSuccess('degree_cert_photo', response, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove('degree_cert_photo', file, fileList)"
                    :file-list="formData.degree_cert_photo ? [{name: 'degree_cert_photo', url: formData.degree_cert_photo}] : []"
                    accept="image/*"
                    multiple
                    list-type="picture-card"
                    :limit="5">
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="面试邀请材料">
                <el-upload
                    ref="invitation_material_photo"
                    :action="uploadAction"
                    :on-success="(response, file, fileList) => handleUploadSuccess('invitation_material_photo', response, file, fileList)"
                    :on-remove="(file, fileList) => handleUploadRemove('invitation_material_photo', file, fileList)"
                    :file-list="formData.invitation_material_photo ? [{name: 'invitation_material_photo', url: formData.invitation_material_photo}] : []"
                    accept="image/*"
                    multiple
                    list-type="picture-card"
                    :limit="5">
                  <i class="el-icon-plus"></i>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never" style="margin-bottom: 20px;" v-if="formData.id">
          <div slot="header" class="clearfix">
            <span style="font-weight: bold;">审核信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="审核状态" prop="status">
                <el-select v-model="formData.status" placeholder="请选择审核状态">
                  <el-option label="待审核" :value="0" />
                  <el-option label="审核通过" :value="1" />
                  <el-option label="审核拒绝" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核人" prop="reviewer">
                <el-input v-model="formData.reviewer" placeholder="请输入审核人" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="审核备注" prop="review_remark">
                <el-input
                    v-model="formData.review_remark"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入审核备注"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="onSubmit" :loading="submitLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { http } from "@/api";

export default {
  name: "SkillSubsidyAdd",
  data() {
    return {
      dialogVisible: false,
      submitLoading: false,
      formData: {
        applicant_name: '',
        company_name: '',
        phone: '',
        gender: '',
        id_card: '',
        certificate_type: 1,
        certificate_level: 1,
        certificate_number: '',
        occupation: '',
        issue_date: null,
        social_bank: '',
        social_account: '',
        certification_proof: '',
        id_card_front_photo: '',
        id_card_back_photo: '',
        graduation_cert_photo: '',
        degree_cert_photo: '',
        invitation_material_photo: '',
        status: 0,
        review_remark: '',
        reviewer: ''
      },
      formRules: {
        applicant_name: [
          { required: true, message: '请输入申请人姓名', trigger: 'blur' }
        ],
        company_name: [
          { required: true, message: '请输入申请人单位名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        id_card: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
        ],
        certificate_number: [
          { required: true, message: '请输入证书编号', trigger: 'blur' }
        ],
        occupation: [
          { required: true, message: '请输入职业(工种)', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    uploadAction() {
      return `${process.env.VUE_APP_BASE_API}/upload`;
    }
  },
  methods: {
    open(data) {
      this.dialogVisible = true;
      if (data) {
        this.formData = { ...data };
        // 格式化日期字段
        if (this.formData.issue_date) {
          this.formData.issue_date = this.formData.issue_date.split('T')[0];
        }
      }
    },
    handleUploadSuccess(field, response, file, fileList) {
      if (response.code === 200) {
        this.formData[field] = response.data.url;
        this.$message.success('上传成功');
      } else {
        this.$message.error(response.message || '上传失败');
      }
    },
    handleUploadRemove(field, file, fileList) {
      this.formData[field] = '';
    },
    onClose() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
      this.formData = {
        applicant_name: '',
        company_name: '',
        phone: '',
        gender: '',
        id_card: '',
        certificate_type: 1,
        certificate_level: 1,
        certificate_number: '',
        occupation: '',
        issue_date: null,
        social_bank: '',
        social_account: '',
        certification_proof: '',
        id_card_front_photo: '',
        id_card_back_photo: '',
        graduation_cert_photo: '',
        degree_cert_photo: '',
        invitation_material_photo: '',
        status: 0,
        review_remark: '',
        reviewer: ''
      };
    },
    async onSubmit() {
      try {
        await this.$refs.form.validate();
        this.submitLoading = true;

        const submitData = { ...this.formData };

        if (this.formData.id) {
          await http.skillSubsidy.update(this.formData.id, submitData);
        } else {
          await http.skillSubsidy.create(null, submitData);
        }

        this.$message.success('操作成功');
        this.$emit('get-page');
        this.onClose();
      } catch (error) {
        console.error('操作失败:', error);
        if (error.response && error.response.data && error.response.data.message) {
          this.$message.error(error.response.data.message);
        } else {
          this.$message.error('操作失败');
        }
      } finally {
        this.submitLoading = false;
      }
    }
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
